<template>
  <ul class="cookList">
    <li v-for="(item, index) in typeGoodsListArr" :key="index">
      <span class="foodImg">
        <img :src="item.goodsImg" width="100%" alt="商品图片">
      </span>
      <div class="name-price">
        <span class="foodName">{{ item.goodsName }}</span>
        <span class="foodPrice">¥{{ item.price || 0 }}</span>
      </div>
    </li>
  </ul>
</template>
<script>
  export default {
    name: 'TypeGoods',
    props: ['typeGoods'],
    data() {
      return {
        typeGoodsList: []
      }
    },
    computed: {
      // 利用计算属性动态获取值，而不是使用watch。因为watch不是给予缓存而计算的，它会重复计算很耗性能
      typeGoodsListArr() {
        return this.typeGoodsList = this.typeGoods;
      }
    }
  }
</script>
<style scoped>
  /* 下方的布局 */
  .cookList li{
    list-style: none;
    width:23%;
    border:1px solid #E5E9F2;
    height: auto;
    overflow: hidden;
    background-color:#fff;
    padding: 2px;
    float:left;
    margin: 2px;
  }
  .cookList li{
    display: flex;
  }
  .foodImg{
    width: 40%;
  }
  .name-price {
    flex: 1;
    padding-left: 10px;
  }
  .foodName{
    font-size: 12px;
    color:brown;
    text-align: left;
    display: block;
  }
  .foodPrice{
    text-align: left;
    display: block;
    font-size: 14px;
    padding-top:10px;
  }
</style>
